<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="org.ifilm.util.GeneralConstants"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Search</title>
		
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
		<script src="/film/js/jquery.js"></script>
	    <script src="/film/bootstrap/js/bootstrap.min.js"></script>
	    
	    <style>
	      	body {
	        	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	      	}
	    </style>
	</head>
	
	<body>
		<jsp:include page="navigationBar.jsp"/>	
		 
		 <div class="container">
			 <div class="content-container">
			 	<h5>Welcome to our Job Finder</h5></br>
			 	<table class="table" border=0>
				 	<tr>
					 	<td width=50%>					 		
				 			<div class="dropdown" style="float:left">					 		
					 			<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Professions<b class="caret"></b></a>
					 			<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="float:left">	
						 		<!-- TODO -->					
									<li><a class="" href="" data-toggle="tab" selected="selected">Actor/Actress</a></li>
									<li><a class="" href="" data-toggle="tab" selected>Boom Operator</a></li>
									<li><a class="" href="" data-toggle="tab">Director</a></li>
								</ul>
							</div>						
						</td>
						<td width=0%>						
						</td>
						<td width=0%>						
						</td>
					</tr>
					<tr>
					 	<td width=50%>					 		
				 			Actor					
						</td>
						<td width=0%>
						Keywords:
							<textarea rows="3" class="long-text"
							name="keywords">main role</textarea>
						</td>
						<td width=0%>
							<div class="btn" style="float:left">Cancel</div>
						</td>
						
					</tr>
					<tr>
					 	<td width=50%>					 		
				 			Boom Operator					
						</td>
						<td width=0%>
						Keywords:
							<textarea rows="3" class="long-text"
							name="keywords"></textarea>
						</td>
						<td width=0%>
							<div class="btn" style="float:left">Cancel</div>
						</td>						
					</tr>
					<tr>
						<td colspan=3><button class="btn" id="searchJobPosting" type="submit">Search</button></td>
					</tr>					
				</table>			 
			 </div>
	 	</div>
	</body>
	
	<script type="text/javascript">
	    $(".pagination a").click(function() {
	    	var page = $(this).attr("page");
	    	window.location.href = ("/film/project/listProjects.do?page=" + page + "&max=" + <%=request.getParameter("max")%>);
	    })
         
	    $(".projectTitle").click(function() {
	    	var pid = $(this).attr("pid");
	    	window.location.href = "/film/project/getProject.do?pid=" + pid;
	    });
	    
	    $("#userProjects").click(function() {
	    	if ($(this).attr("page") == undefined) {
	    		var page = 1;
	    	}else {
	    		var page = $(this).attr("page");
	    	};
	    	
	    	window.location.href = ("/film/project/listUserProjects.do?userId=" + ${user.id} + "&page=" + page  + "&max=" + <%=request.getParameter("max")%>);
	    });
	    
	    $('.dropdown-toggle').dropdown();
		$(".collapse").collapse();
	</script>
	
	<script src="/film/js/commonScripts.js"></script>
</html>